<?php

?><!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8" />

<meta name="viewport" content="width=device-width, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"/>
<title>Platformer Example</title>
<center><h1 style="font-size: 16px">Hans, l'Orque qui voulait être Magicien</h1></center>
<script src='../../../Quintus-master/lib/quintus.js'></script>
<script src='../../../Quintus-master/lib/quintus_sprites.js'></script>
<script src='../../../Quintus-master/lib/quintus_scenes.js'></script>
<script src='../../../Quintus-master/lib/quintus_input.js'></script>
<script src='../../../Quintus-master/lib/quintus_anim.js'></script>
<script src='../../../Quintus-master/lib/quintus_2d.js'></script>
<script src='../../../Quintus-master/lib/quintus_touch.js'></script>
<script src='../../../Quintus-master/lib/quintus_ui.js'></script>

<script>


// # Quintus platformer example
window.addEventListener("load",function() {

	// Set up an instance of the Quintus engine  and include
	// the Sprites, Scenes, Input and 2D module. The 2D module
	// includes the `TileLayer` class as well as the `2d` componet.
	var Q = window.Q = Quintus()
		.include("Sprites, Scenes, Input, 2D, Anim, Touch, UI")
		// Maximize this game to whatever the size of the browser is
		.setup( { width: 640, height: 480 })
		// And turn on default input controls and touch input (for UI)
		.controls().touch();




	// Déplacement simple pour le joueur
	Q.component("simpleRPGControls", {
		defaults: {
			speed: 100
		},

		added: function() {
			var p = this.entity.p;
			Q._defaults(p,this.defaults);
			this.entity.on("step",this,"step");
			p.direction ='right';
		},

		step: function(dt) {
			var p = this.entity.p;
			if(Q.inputs['left']) {
				p.vx = -p.speed;
				p.direction = 'left';
			} else if(Q.inputs['right']) {
				p.direction = 'right';
				p.vx = p.speed;
			} else {
				p.vx = 0;
			}

			if(Q.inputs['up']) {
				p.vy = -p.speed;
				p.direction = 'up';
			} else if(Q.inputs['down']) {
				p.direction = 'down';
				p.vy = p.speed;
			} else {
				p.vy = 0;
			}
		}
	});

	// ## Player Sprite
	Q.Sprite.extend("Player",{
		init: function(p) {
			this._super(p, {
				gravity:0,
				asset: "sprites2.png"
			});
			this.add('2d, simpleRPGControls');
			this.on("hit",function(collision) { 
				if(collision.obj.isA("NPC")) {
					if (collision.obj.p.discussion.length) {
						Q.stage(0).pause();
						Q.stageScene("speakWith", 1, 
							{ label: collision.obj.p.text, discussion: collision.obj.p.discussion}
						);
					}
				}
			});
		}
	});

	Q.Sprite.extend("NPC",{
		init: function(p) {
			this._super(p, {
				gravity:0,
				asset: "npc1.png",
				text: "Replace this"
			});
		}
	});

	// Systeme de discussion
	Q.scene('speakWith',function(stage) {
		var container = stage.insert(new Q.UI.Container({
			x: Q.width/2,
			y: 60,
			fill: "rgba(0,0,0,0.8)"
		}));
		var img_npc = container.insert(
			new Q.Face({ sprite: stage.options.discussion[0].face, sheet: stage.options.discussion[0].face, x: 0, y: 0 })
		);

		var text = container.insert(
			new Q.UI.Text({
				x:0,
				y: 0,
				label: 	'' + stage.options.discussion[0].text  /* + '\n\n' + 'Appuie sur espace pour continuer...' */,
				color: "white",
				size: 12,
				align: 'left'
			})
		);

		Q.input.on('fire',stage,function(e) {
			stage.options.discussion.shift();
			if (stage.options.discussion.length > 0) {
				Q.stageScene("speakWith", 1, 
					{ text: stage.options.text, discussion: stage.options.discussion}
				);
			} else {
				Q.stage(0).unpause();
				Q.clearStage(1);
			}
		});

		container.fit(20, 60);
		text.p.x += 32;
		img_npc.p.x = 0 - container.p.cx + 36;
		img_npc.play('talk');
		
		setTimeout(function() {
			var container2 = stage.insert(new Q.UI.Container({
				x: Q.width/2,
				y: Q.height-30,
				fill: "rgba(255,255,255,1)",
				border: 1
			}));
			var text = container2.insert(
				new Q.UI.Text({
					x:0,
					y: 0,
					label: 	'Appuie sur espace pour continuer...',
					color: "black",
					size: 12,
					align: 'left'
				})
			);
			container2.fit(10, 10);
		}, 5000);
	});
	
	// Les tetes qui bougent
	Q.Sprite.extend("Face", {
		init: function(p) { 
			this._super(p, { sprite: "none", sheet: "none"});
			this.add("animation");
		}
	});

	// ## Level1 scene
	Q.scene("firstVillage",function(stage) {
		stage.insert(new Q.Repeater({ asset: "background.png", speedX: 1, speedY: 1 }));
		
		stage.collisionLayer(new Q.TileLayer({
                             dataAsset: 'house.json',
                             sheet:     'tiles' }));
		
		stage.insert(new Q.Sprite({asset : "bed.png", x: 64, y: 430}));
		stage.insert(new Q.Sprite({asset : "table.png", x: 128.5, y: 240.5}));
		stage.insert(
			new Q.NPC(
				{ 
					x: 110, 
					y: 190 , 
					discussion : 
						[
							{face: 'npc_face', text: 'Salut bonhomme ! Alors, tu as bien dormi ?'}, 
							{face: 'player_face', text: 'Bonjour papy ! J\'ai une grande nouvelle à t\'annoncer !'}, 
							{face: 'npc_face', text: 'Tu veux dire que tu as enfin décidé de faire quelque chose de ta vie ?\n' +
												'Combattre les humains comme l\'a fait fièrement ton père ? \n' +
												'Casser des pierres comme ton abruti de frère ?'}, 
							{face: 'player_face', text: 'Mieux que ça ! J\'ai décidé de devenir magicien !'},
							{face: 'npc_face', text: '!?!...\nQu\'est-ce que c\'est que ces salades ?\nTu essaye de me faire marcher c\'est ça ?'},
							{face: 'player_face', text: 'Non j\'ai bien réfléchi ! Je veux être magicien \net apprendre à jeter des sorts'},
							{face: 'npc_face', text: '(Cet enfant est devenu fou ...)'}, 
							{face: 'npc_face', text: 'Retourne te coucher, je pense qu\'une bonne nuit \nde sommeil te fera du bien !'}, 
							{face: 'player_face', text: 'Mais, papy !? Il est 8h du matin  c\'est absurde,\nje viens de me lever...'},
							{face: 'npc_face', text: 'Hum... Bon, euh, vas voir ta grand mère, moi je vais me faire une tisane...\n' +
												'Ou plutôt un grog... Non, tiens, d\'ailleurs, je vais plutôt aller me fumer \n' +
												'une bonne pipe de Zblorg, ça me fera le plus grand bien !'}, 
							{face: 'npc_face', text: 'Allez ! Bonne nuit !'}, 
							{face: 'player_face', text: 'Euh, oui... bonne nuit papy'}, 
						], 
					text: 'Bonjour bonhomme ! Alors qu\'est-ce que tu racontes de beau aujourd\'hui ?'
				}
			)
		);
		
		stage.insert(
			new Q.NPC(
				{ 
					x: 500, 
					y: 250 , 
					asset: 'npc2.png',
					discussion : 
						[
							{face: 'npc_face2', text: 'Aaah ! Bonjour mon garçon !'},
							{face: 'player_face', text: 'Bonjour mamy ! J\'ai une grande nouvelle à t\'annoncer !'}, 
							{face: 'npc_face2', text: 'AaAAhaarrh !'},
							{face: 'player_face', text: 'J\'ai décidé de devenir magicien !'},
							{face: 'npc_face2', text: 'Lalalalala !'},
							{face: 'player_face', text: 'Euh, mamy, tu m\'écoutes ?'}, 
							{face: 'npc_face2', text: 'Tralala tsoin tsoin!'},
							{face: 'player_face', text: 'Mamy ?'},
							{face: 'npc_face2', text: 'hihihi ! Chapeaux ronds ... Tireli pimpon !'},
							{face: 'player_face', text: 'Hum... Bonne journée mamy !'},
							{face: 'npc_face2', text: 'Oui, bonne journée, mon petit bonhomme !'},
						]
				}
			)
		);

		var player = stage.insert(new Q.Player({x: 96.5, y: 368.5}));
	});

	// ## Asset Loading and Game Launch
	Q.load("background.png, table.png ,sprites2.png, npc1.png, npc2.png, npc_face.png, npc_face2.png, player_face.png, tiles.png, house.json, bed.png", function() {
		
		Q.sheet("npc_face","npc_face.png",{tilew: 64, tileh: 64,  sx: 0, sy: 0});
		Q.animations('npc_face', {
			talk: { frames: [0,1,0,2,3,2,1,0,1], rate: 1/3}
		});
		
		Q.sheet("npc_face2","npc_face2.png",{tilew: 64, tileh: 64,  sx: 0, sy: 0});
		Q.animations('npc_face2', {
			talk: { frames: [0,1], rate: 1/3}
		});
		
		Q.sheet("player_face","player_face.png",{tilew: 64, tileh: 64,  sx: 0, sy: 0});
		Q.animations('player_face', {
			talk: { frames: [0,1], rate: 1/3}
		});
		
		Q.sheet("tiles","tiles.png", { tilew: 32, tileh: 32 });
	
		Q.stageScene("firstVillage");
	});
});




</script>
<style>
  body { padding:0px; margin:0px; }
</style>
</head>
<body>
</body>
</html>
